<template>
  <div class="report-page">
    <!-- 步骤导航 -->
    <el-steps :active="currentStep" finish-status="success" class="mb-4">
      <el-step title="选择模板" />
      <el-step title="配置参数" />
      <el-step title="生成预览" />
    </el-steps>

    <!-- 模板选择 -->
    <div v-if="currentStep === 0" class="template-selection">
      <el-row :gutter="20">
        <el-col v-for="template in templates" :key="template.id" :span="8">
          <el-card
            :class="[
              'template-card',
              { active: selectedTemplate === template.id }
            ]"
            @click="selectTemplate(template.id)"
          >
            <div class="template-preview">
              <img
                :src="template.preview"
                :alt="template.name"
                class="w-full h-40 object-cover"
              />
            </div>
            <div class="template-info">
              <h3 class="text-lg font-medium mb-2">{{ template.name }}</h3>
              <p class="text-gray-500">{{ template.description }}</p>
              <div class="mt-4 flex items-center justify-between">
                <el-tag size="small">{{ template.category }}</el-tag>
                <el-button
                  type="primary"
                  size="small"
                  @click.stop="viewTemplate(template)"
                >
                  预览模板
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 参数配置 -->
    <el-card v-if="currentStep === 1" class="config-card">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium">报告参数配置</span>
          <el-button type="primary" @click="loadDefaultConfig">
            加载默认配置
          </el-button>
        </div>
      </template>

      <el-form :model="reportConfig" label-width="120px">
        <el-form-item label="报告标题">
          <el-input v-model="reportConfig.title" placeholder="请输入报告标题" />
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="reportConfig.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="w-full"
          />
        </el-form-item>

        <el-form-item label="分析维度">
          <el-select
            v-model="reportConfig.dimensions"
            multiple
            class="w-full"
            placeholder="请选择分析维度"
          >
            <el-option
              v-for="item in dimensionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="包含图表">
          <el-checkbox-group v-model="reportConfig.charts">
            <el-checkbox label="trend">趋势图表</el-checkbox>
            <el-checkbox label="distribution">分布图表</el-checkbox>
            <el-checkbox label="comparison">对比图表</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="报告格式">
          <el-radio-group v-model="reportConfig.format">
            <el-radio label="pdf">PDF</el-radio>
            <el-radio label="word">Word</el-radio>
            <el-radio label="excel">Excel</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 报告预览 -->
    <el-card v-if="currentStep === 2" class="preview-card">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium">报告预览</span>
          <div class="flex gap-2">
            <el-button @click="downloadReport">
              <template #icon
                ><el-icon><Download /></el-icon
              ></template>
              下载报告
            </el-button>
            <el-button type="primary" @click="shareReport">
              <template #icon
                ><el-icon><Share /></el-icon
              ></template>
              分享报告
            </el-button>
          </div>
        </div>
      </template>

      <div class="preview-content">
        <div class="report-header">
          <h1 class="text-2xl font-bold text-center mb-4">
            {{ reportConfig.title }}
          </h1>
          <p class="text-gray-500 text-center">
            生成时间：{{ new Date().toLocaleString() }}
          </p>
        </div>

        <!-- 图表预览区域 -->
        <div
          v-if="reportConfig.charts.includes('trend')"
          class="chart-section mb-4"
        >
          <h3 class="text-lg font-medium mb-2">趋势分析</h3>
          <div ref="trendChartRef" style="width: 100%; height: 300px"></div>
        </div>

        <!-- 统计数据 -->
        <el-descriptions border :column="2" class="mt-4">
          <el-descriptions-item label="分析周期">
            {{ formatDateRange(reportConfig.dateRange) }}
          </el-descriptions-item>
          <el-descriptions-item label="数据量">12,345</el-descriptions-item>
          <el-descriptions-item label="异常数">123</el-descriptions-item>
          <el-descriptions-item label="完整性">98.5%</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 底部按钮 -->
    <div class="flex justify-between mt-4">
      <el-button @click="prevStep" :disabled="currentStep === 0">
        上一步
      </el-button>
      <el-button type="primary" @click="nextStep" :disabled="currentStep === 2">
        下一步
      </el-button>
    </div>

    <!-- 模板预览弹窗 -->
    <el-dialog v-model="templatePreviewVisible" title="模板预览" width="70%">
      <div class="template-preview-content">
        <img :src="currentTemplatePreview" alt="模板预览" class="w-full" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

// 当前步骤
const currentStep = ref(0)

// 模板数据
const templates = ref([
  {
    id: 1,
    name: '标准分析报告',
    description: '包含基础数据分析和图表展示',
    category: '通用模板',
    preview: '/api/placeholder/400/300'
  },
  {
    id: 2,
    name: '详细诊断报告',
    description: '深入的数据诊断和问题分析',
    category: '专业模板',
    preview: '/api/placeholder/400/300'
  },
  {
    id: 3,
    name: '周期对比报告',
    description: '跨周期数据对比和趋势分析',
    category: '对比模板',
    preview: '/api/placeholder/400/300'
  }
])

// 选中的模板
const selectedTemplate = ref(null)

// 报告配置
const reportConfig = ref({
  title: '',
  dateRange: [],
  dimensions: [],
  charts: ['trend'],
  format: 'pdf'
})

// 分析维度选项
const dimensionOptions = [
  { label: '时间维度', value: 'time' },
  { label: '类型维度', value: 'type' },
  { label: '设备维度', value: 'device' },
  { label: '区域维度', value: 'area' }
]

// 模板预览相关
const templatePreviewVisible = ref(false)
const currentTemplatePreview = ref('')

// 图表引用
const trendChartRef = ref(null)
let trendChart = null

// 选择模板
const selectTemplate = (templateId) => {
  selectedTemplate.value = templateId
}

// 查看模板预览
const viewTemplate = (template) => {
  currentTemplatePreview.value = template.preview
  templatePreviewVisible.value = true
}

// 加载默认配置
const loadDefaultConfig = () => {
  reportConfig.value = {
    title: '数据分析报告',
    dateRange: [new Date(), new Date()],
    dimensions: ['time', 'type'],
    charts: ['trend', 'distribution'],
    format: 'pdf'
  }
  ElMessage.success('默认配置已加载')
}

// 格式化日期范围
const formatDateRange = (dateRange) => {
  if (!dateRange || dateRange.length !== 2) return ''
  return `${dateRange[0]?.toLocaleDateString()} - ${dateRange[1]?.toLocaleDateString()}`
}

// 初始化趋势图表
const initTrendChart = () => {
  if (!trendChartRef.value) return

  trendChart?.dispose()
  trendChart = echarts.init(trendChartRef.value)

  const option = {
    color: ['#4834d4'],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  }

  trendChart.setOption(option)
}

// 下载报告
const downloadReport = () => {
  ElMessage.success('报告下载已开始')
}

// 分享报告
const shareReport = () => {
  ElMessage.success('报告分享链接已复制')
}

// 步骤控制
const nextStep = () => {
  if (currentStep.value < 2) {
    currentStep.value++
    if (currentStep.value === 2) {
      nextTick(() => {
        initTrendChart()
      })
    }
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 生命周期钩子
onMounted(() => {
  // 初始化逻辑
})
</script>

<style lang="scss" scoped>
.report-page {
  padding: 20px;

  .template-card {
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 20px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    &.active {
      border: 2px solid #4834d4;
    }

    .template-info {
      padding: 16px;
    }
  }

  .config-card,
  .preview-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }

  :deep(.el-button--primary) {
    --el-button-bg-color: #4834d4;
    --el-button-border-color: #4834d4;
    --el-button-hover-bg-color: #5b48e5;
    --el-button-hover-border-color: #5b48e5;
    --el-button-active-bg-color: #3f2db8;
    --el-button-active-border-color: #3f2db8;
  }

  .preview-content {
    padding: 20px;
    background: #fff;
    border-radius: 4px;

    .report-header {
      margin-bottom: 24px;
    }
  }
}

// 工具类
.mb-4 {
  margin-bottom: 16px;
}

.mt-4 {
  margin-top: 16px;
}

.w-full {
  width: 100%;
}
</style>
